<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue简单使用</title>
  <!-- 1.引入vue.js框架 -->
  <script src="./js/vue.js"></script>
</head>

<body>
  <!-- vuejs它是通过虚拟dom来实现真实的dom,所以在得到真实的dom页.需要在页面结构中挂载 -->
  <!-- 2.定义生成dom的挂载点 -->
  <div id="app">
    <!-- 7.在视图层中,通过模板语法把声明好的变量进行数据的绑定,来渲染显示 -->
    <h3>{{msg}}</h3>
    <hr>
    <!-- v-model它能改变数据 -->
    <input type="text" v-model="msg">
  </div>


  <!-- 声明式变量定义 -->
  <script>
    // 3.通过实例化vue类来进行数据的声明 
    const vm = new Vue({
      // 4.指定虚拟dom转为真实dom它在页面中的挂载点的选择器名称
      el:'#app',
      // 5.vue2中在实例化配置中的data它可以写对象也可以也一个函数但是这个函数一定要返回一个对象
      // data(){return {}}
      data: {
        // 6.声明一个msg数据变量给视图进行渲染显示
        msg: '你好 Vue'
      }
    })
    //.$mount('#app')
  </script>

</body>

</html>